<template>
  <div class="message-send-box">
      <div class="send-header-bar">
        <el-popover placement="top" width="400" trigger="click">
          <div class="emojis">
            <div v-for="item in emojiName" class="emoji" :key="item" @click="chooseEmoji(item)">
              <img :src="emojiUrl + emojiMap[item]" style="width:30px;height:30px" />
            </div>
          </div>
          <i class="el-icon-picture-outline-round" slot="reference" title="发表情"></i>
        </el-popover>
        <i class="el-icon-picture" title="发图片" @click="handleSendImageClick"></i>
        <i class="el-icon-folder" title="发文件" @click="handleSendFileClick"></i>
        <i class="el-icon-camera" title="发视频" @click="handleSendVideoClick"></i>
        <i class="el-icon-video-camera" @click="handleSendVideoCallClick" title="视频通话"></i>
      </div>
      <input
        type="file"
        id="imagePicker"
        ref="imagePicker"
        accept=".jpg, .jpeg, .png, .gif"
        @change="sendImage"
        style="display:none"
      />
      <input type="file" id="filePicker" ref="filePicker" @change="sendFile" style="display:none" />
      <input type="file" id="videoPicker" ref="videoPicker" @change="sendVideo" style="display:none" accept=".mp4"/>
      <div class="send-bottom">
        <textarea
          class="text-input" 
          rows="4" 
          resize="false"
          placeholder="按Enter发送消息，Ctrl+Enter换行"
          v-model="messageContent"
          @keydown.enter.exact.prevent="sendMessage"
          @keyup.ctrl.enter.prevent.exact="handleLine">
        </textarea>
        <div class="send-button" @click="sendMessage">
          <div class="send-button-content">
            <div class="button-border"></div>
            <div class="button-border"></div>
            <div class="button-border"></div>
            <div class="button-border"></div>
            发送
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { emojiMap, emojiName, emojiUrl } from '../../utils/emojiMap';
import { ACTION,VERSION,STATUS } from '../../utils/trtcCustomMessageMap';

export default {
  name: "message-send-box",
  data () {
    return {
      messageContent:'',
      emojiMap: emojiMap,
      emojiName: emojiName,
      emojiUrl: emojiUrl
    }
  },
  computed: {
    ...mapGetters(['toAccount']),
    ...mapState({
      currentConversation: state => state.conversation.currentConversation,
      currentUserProfile: state => state.user.currentUserProfile,
      videoRoom: state => state.videocall.videoRoom
    })
  },
  methods: {
    chooseEmoji(item) {
      this.messageContent += item;
    },
    handleLine() {
      this.messageContent += '\n'
    },
    sendMessage(){
      if(this.messageContent === '' || this.messageContent.trim().length === 0){
        this.$store.commit('showMessage', { message: '消息不能为空' , type: 'warn' });
      } else {
        let message = this.tim.createTextMessage({
          to: this.toAccount,
          conversationType: this.currentConversation.type,
          payload: {
            text: this.messageContent
          }
        });
        this.$store.dispatch('sendMessage', message);
        this.messageContent = '';
      }
    },
    sendImage(){
      const message = this.tim.createImageMessage({ 
        to: this.toAccount,
        conversationType: this.currentConversation.type,
        payload: {
          file: document.getElementById('imagePicker') // 或者用event.target
        },
        onProgress: percent => {
          this.$set(message, 'progress', percent); // 手动给message 实例加个响应式属性: progress
        }
      });
      this.$store.dispatch('sendMessage', message);
      this.$refs.imagePicker.value = null;
    },
    sendFile(){
      const message = this.tim.createFileMessage({
        to: this.toAccount,
        conversationType: this.currentConversation.type,
        payload: {
          file: document.getElementById('filePicker')
        },
        onProgress: percent => {
          this.$set(message, 'progress', percent);
        }
      }); 
      this.$store.dispatch('sendMessage', message);
      this.$refs.filePicker.value = null;
    },
    sendVideo(){
      const message = this.tim.createVideoMessage({
        to: this.toAccount,
        conversationType: this.currentConversation.type,
        payload: {
          file: document.getElementById('videoPicker')
        },
        onProgress: percent => {
          this.$set(message, 'progress', percent);
        }
      });
      this.$store.dispatch('sendMessage', message);
      this.$refs.videoPicker.value = null;
    },
    handleSendImageClick() {
      this.$refs.imagePicker.click();
    },
    handleSendFileClick() {
      this.$refs.filePicker.click();
    },
    handleSendVideoClick() {
      this.$refs.videoPicker.click();
    },
    handleSendVideoCallClick(){
      if(this.currentConversation.type === this.TIM.TYPES.CONV_C2C && this.currentUserProfile.userID === this.toAccount){ // 群聊可能userid和userid一致
        this.$store.commit('showMessage', { message: '无法与自己视频通话！' , type: 'warn' });
        return;
      }
      if(this.currentConversation.type === this.TIM.TYPES.CONV_C2C){
        this.$store.commit('generateVideoRoom'); // 初始化房间号
        const options = {
          room_id: this.videoRoom,
          action: ACTION.VIDEO_CALL_ACTION_DIALING,
          type: this.currentConversation.type,
          duration: 0,
          version: VERSION
        }
        const message = this.tim.createCustomMessage({
          to: this.toAccount,
          conversationType: this.currentConversation.type,
          payload: {
            data: 'video_call',
            description: '',
            extension: JSON.stringify(options)
          }
        });
        this.$store.dispatch('sendMessage', message);
        this.$store.commit('toggleVideoCallStatus', STATUS.VIDEO_CALL_STATUS_DIALING);
      }else {
        let trtcRoomId = this.currentConversation.groupProfile.groupCustomField.find((obj) => {
          return obj.key === 'trtc_roomid';
        });
        // 当群组资料包含自定义资料trtc_roomid，并且不为空时，跳转到群视频通话界面
        if(trtcRoomId.value){
          this.$router.push({path:'/group-videocall-item'});
        } else {
          this.$store.commit('showMessage', { message: '当前群组不支持视频通话！' , type: 'warn' });
        }
      }
    }
  }
};
</script>

<style scoped>
.message-send-box{
  height: 100%;
}
.send-header-bar {
  padding-top: 3px;
  padding-left: 10px;
  height: 27px;
}
.send-header-bar i {
  cursor: pointer;
  font-size: 24px;
  color: gray;
  margin-right:12px;
}
.emojis {
  height: 160px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
}
.emoji {
  height: 40px;
  width: 40px;
  box-sizing: border-box;
}
.send-bottom{
  display: flex;
  margin: 10px;
  height: 69px;
}
.text-input {
  flex: left;
  font-size: 16px;
  height: 70px;
  width: 100%;
  border: none;
  outline: none;
  resize:none;
  background-color: #f5f5f5;
}
.send-button {
  flex: right;
}
/* 以下为按钮特效 */
.send-button-content{
  position: relative;
  text-align: center;
  margin: 0 5px;
  padding: 10px 0;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
}
.send-button-content:hover {
  color: white;
  background: #66b1ff;
  box-shadow: 0 0 10px #66b1ff, 0 0 30px #66b1ff, 0 0 60px #66b1ff;
  transition-delay: 0.5s;
}
.button-border{
  position: absolute;
  display: block;
}
.button-border:nth-child(1){
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#66b1ff);
}
.send-button-content:hover .button-border:nth-child(1){
  left: 100%;
  transition: 0.5s;
}
.button-border:nth-child(2){
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,transparent,#66b1ff);
}
.send-button-content:hover .button-border:nth-child(2){
  top: 100%;
  transition: 0.5s;
  transition-delay: 0.125s;
}
.button-border:nth-child(3){
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(27deg,transparent,#66b1ff);
}
.send-button-content:hover .button-border:nth-child(3){
  right: 100%;
  transition: 0.5s;
  transition-delay: 0.25s;
}
.button-border:nth-child(4){
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg,transparent,#66b1ff);
}
.send-button-content:hover .button-border:nth-child(4){
  bottom: 100%;
  transition: 0.5s;
  transition-delay: 0.375s;
}
</style>